<!--
 * @Author: 首页编辑
 * @Date: 2020-06-23 14:44:23
 * @LastEditTime: 2020-06-29 13:23:10
 * @LastEditors: fxg
 * @Description: In User Settings Edit
 * @FilePath: \icps_baseWeb\src\views\indexEditor\indexEditor.vue
-->
<template>
	<div ref="indexEditor" class="indexEditor">
		<div class="nav">
			<div class="left">
				<div class="title">
					<img class="img" src="@/assets/nav/logo.png" />
					<span>华西绿舍云平台</span>
				</div>
			</div>
			<el-menu default-active="index" :background-color="bg_color" active-text-color="#fff" text-color="rgba(255,255,255,1)" class="el-menu-demo" mode="horizontal">
				<el-menu-item disabled index="pagesA">
					<div>基础系统</div>
				</el-menu-item>
				<el-submenu disabled index="">
					<template slot="title">
						ICPS系统
					</template>
				</el-submenu>
				<el-menu-item disabled index="pagesB">
					<div>财务系统</div>
				</el-menu-item>
				<el-menu-item disabled index="">
					<div>报表系统</div>
				</el-menu-item>
				<el-menu-item disabled index="">
					<div>更多</div>
				</el-menu-item>
			</el-menu>
			<div class="right_top-menu">
				<div>
					<div>
						<IconA :index="theme"></IconA>
					</div>
				</div>
				<!--颜色-->
				<div>
					<div>
						<IconB :index="theme"></IconB>
					</div>
				</div>
				<!--下载-->
				<div>
					<IconF :index="theme"></IconF>
				</div>
				<!--字体-->
				<div>
					<IconC :index="theme"></IconC>
				</div>
				<!--通知-->
				<div>
					<el-badge :value="12">
						<IconD :index="theme"></IconD>
					</el-badge>
				</div>
				<!--头像-->
				<div>
					<div class="user_avatar">
						<el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
						<span class="user_name">用户名</span>
						<IconE :index="theme"></IconE>
					</div>
				</div>
			</div>
		</div>
		<div v-for="(item, index) in total" :key="index" class="indexEditor_info">
			<!-- 首页 -->
			<div v-if="index == 0" class="pages_one">
				<div id="left" class="left shadow" :style="leftStyle">
					<div class="left_text">
						点击此区域调节左右布局
					</div>

				</div>
				<div class="center"></div>
				<div id="right" class="right shadow" :style="rightStyle">
					<div v-for="(item, index) in total[0].pages.list" :id="'item' + index" :key="index" :class="'item item' + index" :style="col(item.height)">
						<div class="item_info">
							<div v-if="item.name == 'iframe'">iframe的URL:{{ item.url }}</div>
							<div v-else style="color: #000000;">{{ item.name }}</div>
							<div class="item_botton">
								<div class="inebotton" @click.stop="remove(index)">
									<i class="el-icon-error"></i>
									<span>删除</span>
								</div>
								<div class="inebotton inebotton_last" @click.stop="chooseModule(0, index, null)">
									<i class="el-icon-circle-plus"></i>
									<span>添加模块</span>
								</div>

							</div>
						</div>
					</div>
					<div v-show="show" class="add" @click="addModule">
						<i class="el-icon-circle-plus-outline"></i>
						<span>添加模块</span>
					</div>
				</div>
			</div>
			<!-- 新页面 -->
			<div v-else class="new_pages shadow">
				<div class="new_pages_bg ">
					<div v-for="(pagesItem, pagesIndex) in item.pages" :id="colId(index, pagesIndex)" :key="pagesIndex" :style="col(pagesItem.height)" class="pages_col">
						<div v-for="(arrItem, arrIndex) in pagesItem.arr" :id="lineId(index, pagesIndex, arrIndex)" :key="arrIndex" :style="line(arrItem.width)" class="pages_item">
							<div class="pages_item_info">
								<div v-if="arrItem.name == 'iframe'">iframe的URL:{{ arrItem.url }}</div>
								<div v-else>{{ arrItem.name }}</div>
							</div>
							<div class="pages_item_botton" @click.stop="chooseModule(index, pagesIndex, arrIndex)">
								<i class="el-icon-circle-plus"></i>
								<span>添加模块</span>
							</div>
						</div>
					</div>
				</div>
				<div class="new_pages_botton" @click.stop="removePages(index)">
					<i class="el-icon-error"></i>
					<span>删除页面</span>
				</div>
			</div>
		</div>
		<div class="add_pages">
			<div @click="showPop = true">
				<i class="el-icon-circle-plus-outline"></i>
				<span>添加新页面</span>
			</div>
		</div>
		<!-- 	选择行列数 -->
		<transition name="el-fade-in">
			<div v-show="showPop" class="pop" @click="showPop = false">
				<div class="popBcontent" @click.stop>
					<div class="title">请输入行列数</div>
					<div class="input">
						<div>行数：</div>
						<el-input v-model="colnum" type="Number" size="medium" placeholder="请输入行数" clearable @input="changgeLine()"></el-input>
					</div>
					<div v-for="(item, index) in linenum" :key="index" class="input">
						<div>第{{ index + 1 }}行列数：</div>
						<el-input v-model="item.line" type="Number" placeholder="请输入此行的列数" clearable></el-input>
					</div>
					<div class="botton_bg">
						<el-button size="small" class="bottom_all_two" @click="showPop=!showPop">取 消</el-button>
						<el-button size="small" class="bottom_all" @click="addPages()">确 认</el-button>
					</div>

					<!-- <div class="popBbot" @click="addPages()">确 认</div> -->
				</div>
			</div>
		</transition>
		<!-- 对用区域显示的组件 -->
		<transition name="el-fade-in">
			<div v-show="Module" class="pop" @click="Module = false">
				<div class="popBcontent" @click.stop>
					<div class="title">请选择显示的模块</div>
					<div class="input">
						<div>类别：</div>
						<el-select slot="prepend" v-model="select" size="medium" style="width: 240px;" placeholder="请选择">
							<el-option label="iframe组件" value="1"></el-option>
							<el-option label="看板组件" value="2"></el-option>
						</el-select>
					</div>
					<div v-if="select == 1" class="input">
						<div>完整URL：</div>
						<el-input v-model="url" size="medium" placeholder="请输入完整URL" clearable></el-input>
					</div>
					<div v-if="select == 2" class="input">
						<div>组件名：</div>
						<el-cascader v-model="name" size="medium" style="width: 240px;" :options="list" placeholder="请选择组件" :props="{value:'id',label:'title'}">
						</el-cascader>
						<!-- <el-select size="medium" style="width: 240px;" v-model="name" slot="prepend" placeholder="请选择组件">
							<el-option v-for="(item, index) in list" :label="item" :value="item" :key="index"></el-option>
						</el-select> -->
					</div>
					<div class="botton_bg">
						<el-button size="small" class="bottom_all_two" @click="Module=!Module">取 消</el-button>
						<el-button size="small" class="bottom_all" @click="saveModule()">确 认</el-button>
					</div>
				</div>
			</div>
		</transition>
		<!-- 页面按钮 -->
		<div class="indexEditor_bot">
			<el-button size="medium" style="margin-right: 10px;" @click="$router.go(-1)">返回</el-button>
			<el-button size="medium" class="bottom_three" @click="clearflex()">重新编辑</el-button>
			<el-button size="medium" class="bottom_all_two" @click="seeIndex()">预览</el-button>
			<el-button size="medium" class="bottom_all" @click="saveFlex()">应用</el-button>
		</div>
	</div>
</template>
<script src="./indexEditor.js"></script>
<style lang="scss" src="./indexEditor.scss" scoped></style>
<style lang="scss">
.indexEditor {
  .el-drawer {
    background: #404040;
    width: 300px !important;
  }
  .el-drawer__header {
    color: #fff5d4;
    margin: 0;
    padding: 20px;
    border-bottom: 1px #cccccc solid;
  }
  .el-drawer__body {
    padding: 20px;
  }
}
</style>
